<template>
  <div class="container">
    <div class="video-container">
      <ul>
        <li>
          <div class="video-box loading-bg" data-href="demo1.mp4">
            <img src="../assets/img/bgi.jpg" alt="">
            <div class="controler flex-box">
              <div class="control-box">
                <div class="play">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-life-play"></use>
                  </svg>
                </div>
                <p class="time-past">00:00</p>
                <div class="Progress-bar">
                  <span></span>
                </div>
                <p class="time-all">00:00</p>
                <div class="full-screen">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-life-full-screen"></use>
                  </svg>
                </div>
              </div>
              <div class="play-btn pause">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-life-zanting-yuankuang"></use>
                </svg>
              </div>
            </div>
          </div>
          <h3>五分钟教你玩转国家基因库五分钟教你玩转国家基因库</h3>
          <p>基因微课</p>
          <div class="share">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-life-share-video"></use>
            </svg>
          </div>
        </li>
        <li>
          <div class="video-box loading-bg" data-href="demo2.mp4"> 
            <img src="../assets/img/bgi.jpg" alt="">
            <div class="controler flex-box">
                <div class="control-box">
                  <div class="play">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-life-play"></use>
                    </svg>
                  </div>
                  <p class="time-past">00:00</p>
                  <div class="Progress-bar">
                    <span></span>
                  </div>
                  <p class="time-all">00:00</p>
                  <div class="full-screen">
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-life-full-screen"></use>
                    </svg>
                  </div>
                </div>
                <div class="play-btn pause">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-life-zanting-yuankuang"></use>
                  </svg>
                </div>
              </div>
          </div>
          <h3>五分钟教你玩转国家基因库五分钟教你玩转国家基因库</h3>
          <p>基因微课</p>
          <div class="share">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-life-share-video"></use>
            </svg>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '../components/Header.vue'
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0
    }
  },
  components: {
    Header
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.container {
  padding-top: 64px;
}
.video-container {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15px;
  padding-bottom: 50px;
  ul {
    width: 100%;
    display: block;
    li {
      width: 100%;
      float: left;
      border-radius: r(8);
      overflow: hidden;
      position: relative;
      background: #fff;
      margin-bottom: r(16);
      box-shadow: 0 4px 12px rgba($color: #000000, $alpha: 0.2);
      h3 {
        font-size: r(16);
        line-height: r(24);
        padding-top: r(12);
        padding-bottom: r(0);
        margin-left: r(16);
        margin-right: r(16);
        color: #2f3338;
      }
      p {
        font-size: r(12);
        line-height: r(20);
        color: #666;
        @include setPm(margin, 6, 16, 16, 16);
      }
      .share {
        position: absolute;
        right: r(16);
        bottom: r(16);
        font-size: r(24);
      }
    }
  }
}
.video-box {
  width: 100%;
  padding-bottom: 52.7%;
  background: #000;
  position: relative;
  overflow: hidden;
  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .controler {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    .control-box {
      width: 100%;
      height: r(24);
      padding-left: r(6);
      padding-right: r(6);
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      .play {
        float: left;
        font-size: r(20);
      }
      .Progress-bar {
        float: left;
        width: r(226);
        height: 2px;
        background: #fff;
        opacity: 0.8;
        border-radius: 10px;
        overflow: hidden;
        margin-top: r(10);
        margin-right: r(6);
      }
      .time-past,
      .time-all {
        display: block;
        float: left;
        color: #fff;
        font-size: r(10);
        line-height: r(22);
        margin: 0;
        margin-right: r(6);
      }
      .full-screen {
        font-size: r(16);
        float: right;
      }
    }
    .play-btn {
      width: r(44);
      height: r(44);
      border-radius: 100%;
      font-size: r(44);
      transition: all 0.35s ease-out;
      -webkit-transition: all 0.35s ease-out;
    }
  }
}
</style>
